<style scoped>
	* {
		padding: 0;
		margin: 0;
		list-style: none;
		font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif;
	}
	.calendar {
		width: 660px;
		border:1px solid #e7eaf0;
		background: #fff;
        z-index: 99;
	}
	.calendar-header{
		box-sizing: border-box;
        padding: 0 10px;
		background-color: #5697f1;
		height: 40px;
		line-height: 40px;
	}
	.calendar-header div {
		display: inline-block;
	}
	.header-time input{
		font-weight: 600;
	}
	.header-time button.on{
		display: inline-block;
		padding: 0 5px;
		background: #4683de;
		color: #fff;
	} 
	.static-date{
		width: 48%;
		margin-right: 30px;
		padding: 0 5px;
		height: 20px;
		line-height: 20px;
		background-color: #fff;
	}
	.static-date input{
		width: 43%;
	}
	.static-date span{
		color: #657180;
	}
	.input-start {
		position: relative;
		color: #5697f1;
		background: none;
		border: none;
	}
	.input-start:after{
		position: absolute;
		content: "";
		width: 2px;
		top:5px;
		left:-2px;
		height: 10px;
		background-color:#5697f1; 
	}
	.input-end{
		color: #657180;
		background: none;
		border: none;
	}
	.calendar-header div button {
		color: #fff;
		background: none;
		border: none;
		font-weight: 600;
		margin: 0 4px;
	}
	.calendar-header div button:hover{
		cursor: pointer;
	}
	.select-time-slot{
		height: 40px;
		line-height: 40px;
		background-color: #f7f8f9;
		border-bottom: 1px solid #cbced7;
		position: relative;
	}
	.left-timeSlot, .right-timeSlot {
		position: absolute;
		z-index: 4;
		top:0
	}
	.left-timeSlot {
		left:10px;
	}
	.right-timeSlot {
		right:10px;
	}
	.select-time-slot .time-slot ul {
		padding:0;
		border:none;
		background: none;
	}
	.select-time-slot .time-slot ul li {
		text-align: center;
		font-size: 14px;
		font-weight: 800;
		color: #464c5b;
		padding:0 14px;
	}
	.select-time-slot .time-slot ul li:hover {
		background: none;
	}
	.choose-throng .dropdown .calendar-content ul {
		border:none;
		padding:0 10px;
	}
	
	.select-time-slot .time-slot button {
		color: #000;
	}
	.calendar-content{
		margin-top: 5px;
	}
	.pre{
		width:42%;
		margin-right: 3%;
	}
	.next{
		width:42%;
		margin-left: 3%;
	}
	.calendar-content div ul{
		width:100%;
	}
	.calendar-content div ol{
		width:100%;
		margin-bottom: 5px;
		padding:0 10px;
	}
	.calendar-content div ol li {
		text-align: center;
		color: #cbced7;
		width: 14.2%;
	}
	.calendar-content div ul li {
        box-sizing: border-box;
		margin: 5px 0;
		padding: 0 !important;
		text-align: center;
		width: 14.2%;
		float: left;
		height: 24px;
		line-height: 24px;
		cursor: pointer;
	}
	.calendar-content div ul li em {
		display: inline-block;
		width: 100%;
		height: 100%;
		cursor: pointer;
	}
	.disables {
		color: #898989;
	}
	/* ============================================================
	   flex：定义布局为盒模型
	   flex-v：盒模型垂直布局
	   flex-1：子元素占据剩余的空间
	   flex-align-center：子元素垂直居中
	   flex-pack-center：子元素水平居中
	   flex-pack-justify：子元素两端对齐
	   兼容性：ios 4+、android 2.3+、winphone8+
	   ============================================================ */
	
	.flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}
	
	.flex-v {
		-webkit-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	
	.flex-1 {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}
	.flex-2 {
		-webkit-box-flex: 2;
		-webkit-flex: 2;
		-ms-flex: 2;
		flex: 2;
	}
	
	.flex-align-center {
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	
	.flex-pack-center {
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
	
	.flex-pack-justify {
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	
	.box-sizing {
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		/* Firefox */
		-webkit-box-sizing: border-box;
		/* Safari */
	}
	.calendar-footer{
		height: 40px;
		padding: 0 15px;
		border-top:1px solid #dfe7f2;
	}
	.calendar-footer button {
		margin: 8px 0 0 10px;
		height: 24px;
		line-height: 24px;
		text-align: center;
		width:60px;
		font-size: 14px;
		border-radius: 4px;
		border:none;
		background: none;
		cursor: pointer;
	}
	.calendar-footer button.submit{
		background-color: #43a3fb;
		color: #fff;
	}
	.calendar-footer button.submit:hover {
		background: #4777c0;
	}
	
	.l-span{
		height: 40px;
	    line-height: 40px;
	    margin-left: 10px;
	}
	.l-span:hover{
		color:#5697f1;
	}
	.r-span{
		height: 40px;
	    line-height: 40px;
	    margin-right: 10px;
	}
	.r-span:hover{
		color:#5697f1;
	}
	.time{
		box-sizing: border-box;
		float: left;
		padding-right:10px;
		margin-top: 20px;
	}
	.time-slot span{
		cursor: pointer;
	}
	.calendar-content div ul li.on{
	    display: inherit;
	    background-color: #4683de;
	    border-radius: 5px;
	    color: #fff;
	}

	.calendar-content div ul li.gray {
	    display: inherit;
	    background-color: #ccc;
	    border-radius: 5px;
	    color: #fff;
	}
	.calendar-content div ul li:hover{
		background : #7eb2ff !important;
		color: #fff !important;
		border-radius: 5px !important;
	}
</style>
<template>
	<div>
		<div class="calendar">
		<!-- 顶部 -->
			<div class="calendar-header">
				<div class="header-time">
				    <span style="color:#fff">时期:&nbsp&nbsp</span>
				    <div class="static-date">
				        <span class="icon-date"></span>
				    	<input class="input-start" type="text" disabled v-model = "timefirst" />
				    	<span>到&nbsp&nbsp</span>
						<input class="input-end" type="text" disabled v-model = "timelast" />
				    </div>
					<div>
						<button @click="select(0, $event)">今日</button>
						<button @click="select(1, $event)">昨日</button>
						<button @click="select(7, $event)">近七日</button>
						<button @click="select(30, $event)">近30日</button>
						<!--<button>月份</button>-->
						<button @click="select(365, $event)">近一年</button>
					</div>
				</div>
			</div>
			<div class="calendar-body">
				<!-- 月份切换 -->
				<div class="select-time-slot">
					<div class="time-slot flex">
						<div class="left-timeSlot">
							<span @click="prevMonth(0)" class="icon-caret-l l-span">&lt;</span>
							<span @click="nextMonth(0)" class="icon-caret-r r-span">&gt;</span>
						</div>
						<ul class="flex flex-1">
							<li class="flex-1" v-for="item in scope">{{ item.y }}年{{ item.m }}月</li>
						</ul>
						<div class="right-timeSlot">
							<span @click="prevMonth(1)" class="icon-caret-l l-span">&lt;</span>
							<span @click="nextMonth(1)" class="icon-caret-r r-span">&gt;</span>
						</div>
					</div>
				</div>
				<div class="calendar-content flex">
					<div class="flex-1 pre">
						<ol class="flex">
							<li v-for="item in weeks" class="flex-1">{{item}}</li>
						</ol>
						<ul v-if="views">
							<li v-for="item in views[0]" :class="!item.state ? 'disables': (item.state === 3 ? '' : (item.state === 1 ? 'on' : 'gray'))"  track-by="$index" @click="selectTime($event, 0,$index)">
								{{ item.num }} 
							</li>
						</ul>
					</div>
					<div class="flex-1 next">
						<ol class="flex">
							<li v-for="item in weeks" class="flex-1">{{item}}</li>
						</ol>
						<ul v-if="views">
							<li  v-for="item in views[1]" :class="!item.state ? 'disables': (item.state === 3 ? '' : (item.state === 1 ? 'on' : 'gray'))" track-by="$index" @click="selectTime($event, 1,$index)">
								{{ item.num }}
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="calendar-footer clearfix">
				<button @click="sendTime" class="submit fr trans">确定</button>
				<button @click="closeCalendar" class="cancel fr trans">取消</button>
			</div>
		</div>
	</div>
</template>
<script>
	module.exports = {
		data: function() {
			return {
				//周
				weeks: ['日', '一', '二', '三', '四', '五', '六'],
				scope: [{
					y: 2016,
					m: 1
				}, {
					y: 2016,
					m: 2
				}],
				//已选日期区间
				ranges: [{
					y: 2016,
					m: 3,
					d: 1
				}, {
					y: 2016,
					m: 4,
					d: 8
				}],
				//日历天数表
				views: null,
				tmps1:null,
				tmps2:null,
				//存储初始化日期
				save : []
			}
		},
		watch : {
			scope (item){
				this.filterStrAsNum(item)
			},
			ranges (item){
				this.filterStrAsNum(item)
			},
			save (item){
				this.filterStrAsNum(item)
			}
		},
		computed : {
			timefirst(){
				return `${this.ranges[0].y}-${this.ranges[0].m}-${ this.ranges[0].d }`;
			},
			timelast(){
				return `${this.ranges[1].y}-${this.ranges[1].m}-${ this.ranges[1].d }`;
			}
		},
		methods: {
			/*
			 * 过滤输入时间区间为整型
			 * @param item {array}
			 */
			filterStrAsNum (item){
				let len = item.length;
				while(len){
					len --;
					let t = item[len]
					  , keys = Object.keys(t);
					for(let i of keys){
						t[i] = parseInt(t[i]);
					}
				}
			},
			/*
			 * 获取时间区间
			 * @param is 是否全量覆盖
			 */ 
			getTimeScope(timestamp, is){
				var now = new Date()
				var t = new Date(timestamp);
				var data = [{
					y : t.getFullYear(),
					m : t.getMonth() + 1,
					d : t.getDate()
				},{
					y : now.getFullYear(),
					m : now.getMonth() + 1,
					d : now.getDate()
				}]
				if(is){
					data[1] = {
						y : t.getFullYear(),
						m : t.getMonth() + 1,
						d : t.getDate()
					};
				}
				return data;
				
			},
			select (code, event){
				var t = new Date().getTime() - code * 24 * 3600 * 1000;
				if(code > 1){
					this.ranges = this.getTimeScope(t);
				}else{
					this.ranges = this.getTimeScope(t, true);
				};
				this.scope = JSON.parse(JSON.stringify(this.ranges));
				this.countViewDays();
			},
			/*
			 * 改变日历
			 * @param day 几号
			 * @param inx 日历索引
			 * @param is 是否全量替换
			 */
		    changeTime(day, inx, is) {
				var cur = this.scope[inx];
				if(is) {
					this.ranges.forEach((item, keys, arr) => {
						arr[keys].y = cur.y
						arr[keys].m = cur.m
						arr[keys].d = day
					});
				}else{
					let n = this.scope[inx];
					let o = this.ranges[0];
					if(new Date(n.y, n.m - 1, day).getTime() > new Date(o.y, o.m - 1, o.d).getTime()) {
						this.ranges[1].y = n.y;
						this.ranges[1].m = n.m;
						this.ranges[1].d = day;
					} else {
						this.ranges[0].y = n.y;
						this.ranges[0].m = n.m;
						this.ranges[0].d = day;
					};
				}
			},
			/*
			 * 选择时间
			 * @param e 时间对象
			 * @param inx 日历索引 ----inx=0为左边日历，inx=1为右边
			 */
			selectTime(e, inx) {
				let first = JSON.stringify(this.ranges[0]);
				let last = JSON.stringify(this.ranges[1]);
				let day = parseInt(e.target.textContent);
				
				//清空所有可选日期的状态
				if(!this.views) return false;
				let len = this.views.length;
				while(len){
					len --;
					let v = this.views[len];
					for(let i = 0, lens = v.length; i < lens; i++){
						if(v[i].state === 1 || v[i].state === 2){
							v[i].state = 3;
						}
					}
				}
				this.$nextTick(()=>{
					if(first !== last) {
						this.changeTime(day, inx, true);
					}
					else {
						this.changeTime(day, inx, false);
				    }
					this.countViewDays();
				});
				
			},
			//下一个月
			nextMonth(inx) {
				if(!inx){
					if(this.scope[1].m === this.scope[0].m){
						return false
					}
				}
				var month = this.scope[inx];
				var next = month.m + 1;
				if(next > 12) {
					month.m = 1;
					month.y += 1;
				} else {
					month.m += 1
				};
				this.countViewDays();
			},
			//上一个月
			prevMonth(inx) {
				if(inx){
					if(this.scope[1].m === this.scope[0].m){
						return false
					}
				}
				var month = this.scope[inx];
				var next = month.m - 1;
				if(!next) {
					month.m = 12;
					month.y -= 1;
				} else {
					month.m -= 1
				};
				this.countViewDays();
			},
			/*
			 * 判断是否为闰年
			 * @param y 年 如 ：2017
			 */
			isleap(y) {
				return(y % 4 == 0) && (y % 100 != 0 || y % 400 == 0);
			},
			/*
			 * 获取每月天数
			 * @param y 年
			 * @param m 月
			 */
			getTotaldays(y, m) {
				const months = [31, 28 + this.isleap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
				return months[m - 1];
			},
			/*
			 * 获取每月第一天 为星期几
			 * @param y 年
			 * @param m 月
			 */
			getWeeks(y, m, d) {
				return new Date(y, m, d).getDay();
			},
			/*
			 * 计算开始多余星期
			 * @param y 年
			 * @param m 月
			 * @return {
			 * 	  num : 2,
			 * 	  state : (0 : 不做显示， 1 : 开头与结尾， 2: 中间)	
			 * }
			 */
			countFirstOther(y, m) {
				let first = this.getWeeks(y, m - 1, 1);
				let year = y;
				let month = m - 1;
				let arr = [];
				if(!month) {
					month = 12;
					year -= 1;
				};
				//获取月份天数
				let prevtotalnum = this.getTotaldays(year, month);
				for(let i = 0; i < first; i++) {
					arr.push({
						num : prevtotalnum,
						state : 0
					});
					prevtotalnum--;
				}
				return arr.length ? arr.reverse() : [];
			},
			/*
			 * 计算结束多余星期
			 * @param y 年
			 * @param m 月
			 * @param end 当月最后一天星期
			 * * @return {
			 * 	  num : 2,
			 * 	  state : (0 : 不做显示， 1 : 开头与结尾， 2: 中间)	
			 * }
			 */
			countLastOther(y, m) {
				var total = this.getTotaldays(y, m);
				var last = this.getWeeks(y, m - 1, total);
				var year = y;
				var month = m + 1;
				var arr = [];
				if(month > 12) {
					month = 1;
					year += 1;
				};
				for(var i = last, j = 1; i < 6; i++, j++) {
					arr.push({
						num : j,
						state : 0
					});
				}
				return arr.length ? arr : [];
			},
			//计算日历表
			countViewDays() {
				var arr = [],
					scope = [
						new Date(this.ranges[0].y, this.ranges[0].m - 1, this.ranges[0].d).getTime(),
						new Date(this.ranges[1].y, this.ranges[1].m - 1, this.ranges[1].d).getTime()
					];
				this.views = [];
				this.scope.forEach((item, keys, arrs) => {
					var box = [];
					//获取月总天数
					var days = this.getTotaldays(item.y, item.m);
					var firsts = this.countFirstOther(item.y, item.m);
					var lasts = this.countLastOther(item.y, item.m);

					for(var i = 0, j = 1; i < days; i++, j++) {
						//获取时间戳
						var timestamp = new Date(item.y, item.m - 1, j).getTime();
						if(scope[0] <= timestamp && timestamp <= scope[1]) {
							if(scope.indexOf(timestamp) > -1) {
								box.push({
									num : j,
									state : 1
								});

							} else {
								box.push({
									num : j,
									state : 2
								});
							}
						} else {
							box.push({
								num : j,
								state : 3
							});
						}

					};
					this.views[keys] = firsts.concat(box, lasts);
					
				});
			},
			// 确定按钮，发送时间
			sendTime:function(){
				let vm=this;
				let data=$.extend(true,{},vm.ranges);
				vm.$dispatch('set_calendar',vm.ranges);
				this.save = JSON.parse(JSON.stringify(this.ranges));
			},
			// 关闭日历组件
			closeCalendar:function(){
				if(this.save.length){
					this.ranges = JSON.parse(JSON.stringify(this.save));
					this.countViewDays();
				};
				this.$dispatch("close_calendar",{});
			}
		},
		events:{
			// 弹出日历组件时接收到的事件,用于保证日历组件对应日期与页面相符
			get_old:function(data1,data2){
				let vm=this;
				let tmp;
				tmp={
					y:data1.y,
					m:data1.m,
					d:data1.d
				}
				vm.ranges.$set(0,tmp);
				tmp={
					y:data2.y,
					m:data2.m,
					d:data2.d
				};
				vm.ranges.$set(1,tmp);
				this.save = JSON.parse(JSON.stringify(vm.ranges)); 
				vm.scope = JSON.parse(JSON.stringify(vm.ranges));
				vm.countViewDays();
				
			}
		},
		created: function() {
			this.select(1);
			//初始化发送时间
			//this.sendTime();
		}
	}
</script>